<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录</title>
    <!-- 地址栏显示 -->
    <link rel="shortcut icon" href="/images/hospital.png">
    <!-- 收藏栏也显示 -->
    <link rel="Bookmark" href="/images/hospital.png"/>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>

<body>
    <!-- 你的 HTML 代码 -->
    <div class="layui-container">
        <div class="layui-row">
            <fieldset class="layui-elem-field layui-col-md4 layui-col-md-offset4">
                <legend>登录</legend>
                <div class="layui-field-box">
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">邮箱</label>
                            <div class="layui-input-block">
                                <input type="text" name="email" required lay-verify="email" placeholder="请输入邮箱"
                                    autocomplete="off" class="layui-input" value="1208585122@qq.com">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-block">
                                <input type="password" name="password" required lay-verify="password"
                                    placeholder="请输入密码" autocomplete="off" class="layui-input" value="123">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="login">立即登录</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>
        </div>
    </div>
    <script src="/layui/layui.js"></script>
    <script>
        layui.use(['jquery', 'layer', 'form'], function () {
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.jquery;
            //表单验证（页面自动关联,验证结果绑定在表单）
            form.verify({
                email: function (value, item) { //value：表单的值、item：表单的DOM对象 自定义验证规则
                    if (/^\d+\d+\d$/.test(value)) {
                        return '用户名不能全为数字';
                    }
                },
                password: function (value, item) {
                    if (!/^.{3,12}$/img.test(value)) {
                        return "密码必须位3~12位"
                    }
                },
            });
            form.on('submit(login)', function (data) {
                //用ajax时需要注意你的url接口、采用哪一种方式type获取，它的使用的哪种数据类型datatype
                var user = {
                    email: $('input[name="email"]').val(),
                    password: $('input[name="password"]').val()
                };
                $.ajax({
                    url: '/dologin',
                    type: 'post',
                    contentType: 'application/json',
                    dataType: 'json',
                    data: JSON.stringify(user),
                    beforeSend: function () {
                        //弹出的lodinng层
                        layer.load(2, {
                            shade: [0.5, "#333"]
                        });
                    },
                    success: function (res) {
                        if (res.status == 1) {
                            //res.code == 1,表示用户输入成功，0表示失败
                            //获取用户输入的内容，存到本地存储，采用sessionStorage是因为用户只需输入一次，不需要保存，用户的体验感较好，也比较安全
                            //sessionStorage.setItem('admin',JSON.stringify(res.data.admindata));
                            //获取用户数据，并存储在本地。
                            //sessionStorage.setItem('role',JSON.stringify(res.data.roledata));
                            //sessionStorage.setItem('module',JSON.stringify(res.data.moduledata));
                            layer.msg("登录成功")
                            setTimeout(function () {
                                //如果输入成功，可以跳到另一个你需要的界面
                                location.href = "/main";
                            }, 2000)
                        } else {
                            //不等于1时填出的内容
                            layer.msg(res.message)
                        }
                    },
                    error: function () {
                        //用户输入与接口内容不对应，显示文字
                        layer.msg("网络繁忙，访问失败")
                    },
                    complete: function () {
                        //关掉loading
                        layer.closeAll("loading")
                    }
                })
                return false;//不会跳转到网址栏，只会跳转到你要的界面 一定要写。
            });
        });
    </script>
</body>

</html>